<template>
	<view class="follow-with-interest">
		<view class="follow-with-interest-tabs">
			<view class="user-box" v-for="item in followWithInterestUserList" :key="item">
				<view :class="curUserId == item.userId? 'active-user-head-src-box user-head-src-box' : 'user-head-src-box'" @click="handleCurUser(item)">
					<image class="user-head-src" :src="item.headSrc" />
					<view v-if="!item.concernStatus" class="follow-with-interest">
						<up-icon size="14px" color="#fff" name="plus" />
					</view>
					<view v-else class="follow-with-interest active-follow-with-interest">
						<up-icon size="20px" color="#fff" name="checkmark" />
					</view>
				</view>
				<view :class="curUserId == item.userId? 'active-user-name user-name' : 'user-name'" @click="handleCurUser(item)">{{ item.userName }}</view>
			</view>
		</view>
		<view class="follow-with-interest-content-box">
			<view class="follow-with-interest-box" v-for="item in followWithInterestList" :key="item">
				<view class="follow-with-interest-title">{{ item.title }}</view>
				
				<view v-if="item.content" class="follow-with-interest-content">{{ item.content }}</view>
				
				<view v-if="item.imgList.length" class="follow-with-interest-img">
					<block v-if="item.imgList.length == 1">
						<OneRowOneVue :imageSrcList="item.imgList" />
					</block>
							
					<block v-else-if="item.imgList.length == 2 || item.imgList.length == 4">
						<OneRowTwoVue :imageSrcList="item.imgList" />
					</block>
							
					<block v-else>
						<OneRowThreeVue :imageSrcList="item.imgList" />
					</block>
				</view>
				
				<view class="follow-with-interest-videos" v-if="item.videoSrc">
					<video
						style="width: 100%; height: 100%;" 
						:src="item.videoSrc" 
						:controls="true"  
						ref="el => { if (el) { video.ref = el; } }"
						enable-play-gesture
						show-mute-btn
						vslide-gesture
						muted
					>
					</video>
				</view>
				
				<view class="data-info-box">
					<view class="item-box">
						<u-icon size="22px" color="#000" name="thumb-up" />
						<text>{{ item.totalLikes }}</text>
					</view>
					
					<view class="item-box">
						<u-icon size="24px" name="chat" @click="handleComment" />
						<text>{{ item.totalComments }}</text>
					</view>
					
					<view class="item-box" v-if="item.tatalCollects">
						<up-icon size="24px" :color="item.collectsStatus ? '#fd6200' : '#000'" name="star-fill" />
						<text>{{ item.tatalCollects }}</text>
					</view>
					
					<view class="item-box">
						<u-icon size="24px" name="share-square" />
						<text>{{ item.totalForwards }}</text>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 评论弹窗 -->
		<PopupVue :popupShow="popupShow" @closeCB="popupShow = false" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import OneRowOneVue from '../layoutComponents/OneRowTwo.vue';
	import OneRowTwoVue from '../layoutComponents/OneRowTwo.vue';
	import OneRowThreeVue from '../layoutComponents/OneRowThree.vue';
	import PopupVue from '../popupComponents/index.vue';
	
	// 引入组件
	components: {
		OneRowOneVue;
		OneRowTwoVue;
		OneRowThreeVue;
		PopupVue
	};
	
	// 弹窗状态
	const popupShow = ref(false)
	
	// 当前用户
	const curUserId = ref(1)

	// 关注的用户
	const followWithInterestUserList = ref([
		{
			userId: 1, // 用户id
			concernStatus: true, // 关注状态
			headSrc: 'https://www.cosplayla.com/picup/cospic/202402/10495_1708783433236_200.jpg', // 关注者头像
			userName: '富贵花开',
		},
		{
			userId: 2, // 用户id
			concernStatus: false, // 关注状态
			headSrc: 'https://www.cosplayla.com/picup/cospic/202402/10495_1708783433236_200.jpg', // 关注者头像
			userName: '富贵花开',
		},
		{
			userId: 3, // 用户id
			concernStatus: true, // 关注状态
			headSrc: 'https://www.cosplayla.com/picup/cospic/202402/10495_1708783433236_200.jpg', // 关注者头像
			userName: '富贵花开家遭大妈怒怼',
		},
		{
			userId: 4, // 用户id
			concernStatus: true, // 关注状态
			headSrc: 'https://www.cosplayla.com/picup/cospic/202402/10495_1708783433236_200.jpg', // 关注者头像
			userName: '富贵花开家遭大妈怒怼',
		},
		{
			userId: 5, // 用户id
			concernStatus: true, // 关注状态
			headSrc: 'https://www.cosplayla.com/picup/cospic/202402/10495_1708783433236_200.jpg', // 关注者头像
			userName: '富贵花开家遭大妈怒怼',
		},
		{
			userId: 6, // 用户id
			concernStatus: true, // 关注状态
			headSrc: 'https://www.cosplayla.com/picup/cospic/202402/10495_1708783433236_200.jpg', // 关注者头像
			userName: '富贵花开家遭大妈怒怼',
		},
	])

	// 关注数据
	const followWithInterestList = ref([
		{
			collectsStatus: false, // 收藏状态
			title: '那兔新闻社，刘皇叔蹦迪。专家遭大妈怒怼', // 标题
			videoSrc: '../../static/2.mp4', // 视频地址
			imgList: [], // 图片地址
			content: '', // 内容
			totalLikes: 109, // 总点赞数
			totalComments: 532, // 总评论数
			totalForwards: 120, // 总转发数
			tatalCollects: 100, // 总收藏
		},
		{
			collectsStatus: false, // 收藏状态
			title: '那兔新闻社，刘皇叔蹦迪。专家遭大妈怒怼', // 标题
			videoSrc: null, // 视频地址
			imgList: [
				'https://www.cosplayla.com/picup/cospic/202402/10495_17087837077860_200.jpg'
			], // 图片地址
			content: null, // 内容
			totalLikes: 109, // 总点赞数
			totalComments: 532, // 总评论数
			totalForwards: 120, // 总转发数
			tatalCollects: 100, // 总收藏
		},
		{
			collectsStatus: false, // 收藏状态
			title: '那兔新闻社，刘皇叔蹦迪。专家遭大妈怒怼', // 标题
			videoSrc: null, // 视频地址
			imgList: [], // 图片地址
			content: '同年春天，新冠疫情重创英国。在疫情封锁中，刚刚上任财政大臣的苏纳克抓住机会，主导了价值数十亿英镑的的财政援助计划，以在封锁期间保持就业和企业的运转，为复苏餐饮业，他提出外出就餐即帮忙（“Eat Out to Help Out” ）的计划，旨在救助受新冠疫情冲击严重的酒吧、餐厅和咖啡馆，根据计划，人们在每周的周一至周三到参加活动的餐厅和咖啡厅用餐将享受最高50%、每人不超过10英镑的折扣。这些让他一度成为全英国最受公众欢迎的政客，风头甚至一度盖过了首相约翰逊。', // 内容
			totalLikes: 109, // 总点赞数
			totalComments: 532, // 总评论数
			totalForwards: 120, // 总转发数
			tatalCollects: 200, // 总收藏
		},
	])
	
	// 点击当前用户
	const handleCurUser = (item) => {
		curUserId.value = item.userId
	}
	
	// 点击评论
	const handleComment = () => {
		popupShow.value = true
	}
</script>

<style lang="scss" scoped>
	.follow-with-interest {
		width: 100%;
		height: calc(100vh - 100rpx);
		// margin-top: 100rpx;
		overflow: hidden;
		background-color: #f5f5f5;

		.follow-with-interest-tabs {
			height: 240rpx;
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			background-color: #fff;
			margin-bottom: 12rpx;
			overflow: auto;

			.user-box {
				height: 100%;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.user-head-src-box {
					width: 120rpx;
					position: relative;

					.user-head-src {
						display: block;
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.follow-with-interest {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						margin-left: -24rpx;
					}

					.active-follow-with-interest {
						background-color: #fd6200;
					}
				}
				
				.active-user-head-src-box {
					border: 4rpx solid red;
					border-radius: 50%;
				}

				.user-name {
					width: 120rpx;
					margin-top: 12rpx;
					font-size: 24rpx;
					font-weight: 700;
					/* 强制文本在一行内显示 */
					white-space: nowrap;
					/* 隐藏溢出的内容 */
					overflow: hidden;
					/* 省略号表示文本被截断 */
					text-overflow: ellipsis;
				}
				
				.active-user-name {
					color: red;
				}
			}
		}

		.follow-with-interest-content-box {
			width: 100%;
			height: calc(100% - 240rpx - 12rpx);
			background-color: #fff;
			overflow: auto;
			
			.follow-with-interest-box {
				width: 100%;
				margin-bottom: 12rpx;
				padding: 24rpx;
				box-sizing: border-box;
				background-color: #fff;
				
				.follow-with-interest-title {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 42rpx;
				}
				
				.follow-with-interest-content {
					font-size: 24rpx;
					color: #000;
					line-height: 36rpx;
					margin-top: 12rpx;
				}
				
				.follow-with-interest-img {
					margin-top: 12rpx;
				}
				
				.follow-with-interest-videos {
					margin-top: 12rpx;
					width: 100%;
					height: 280rpx;
					border-radius: 12rpx;
				}
				
				.data-info-box {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					
					.item-box {
						display: flex;
						align-items: center;
						
						text {
							font-size: 24rpx;
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
</style>